<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { legacyLogicalPropertiesTransformer, StyleProvider } from 'ant-design-vue';
import CustomWebSocket from './utils/websocket_utils';
import { apiGetGroups, apiGetSystemProject } from './http/api';
import { eMenuType } from './interface/enum';

// import { eventBus } from '@/utils/event_bus';
import { large_screen_routes } from './router/large_screen_monitoring';
import { routers } from './router';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
onBeforeMount(async () => {
    const res = await getSystemProject(); // Corrected function name

    console.log('====================================');
    console.log(res);
    console.log('====================================');
    if (res && res.length > 0) {
        res.forEach(async item => {
            await getGroups(item);
        });
    }
    await getGroups('');

    CustomWebSocket.getInstance().initWs();
});
const getSystemProject = async (): Promise<string[]> => { // Corrected function name
    try {
        const res = await apiGetSystemProject();
        return res.data;
    } catch (error) {
        return [];
    }
};
const getGroups = async (val: string) => {
    try {
        const res = await apiGetGroups(val);

        if (res.data && res.data.length > 0) {
            res.data.forEach((item, i) => {
                addRoute(item.parent_name, item.second_name, i);
            });
            // eventBus.emit('refresh_menu');
        }
    } catch (error) { }
};

function addRoute(parent_name: string, second_name: string, id: number) {
    const routeObject = {
        path: '/large_screen/zfn/fx/' + id,
        name: 'zfn_fx_' + id,
        meta: {
            menu_show: true,
            menu_type: eMenuType.PAGE,
            title: second_name,
            parentPath: '/large_screen/zfn',
            sort: 1,
            params: { parent_name, second_name },
        },
        component: () => import('./views/large_screen/zfn/fenxi/index.vue'),
    };
    const info = large_screen_routes.children![0].children!.find(item => item.meta!.title === second_name);
    if (!info) {
        large_screen_routes.children![0].children!.push(routeObject);
    }
    routers.addRoute('zfn', routeObject); // 添加路由
}
const local = ref(zhCN);
</script>

<template>
    <style-provider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
        <a-config-provider :locale="local" :theme="{
            components: {
                Switch: {
                    colorPrimary: '#FF9F00',
                    colorTextQuaternary: '#E6E6E6',
                    colorWhite: '#1B1B1B',
                    colorTextTertiary: '#fff',
                    colorPrimaryHover: '#ff9f00bd',
                },
                Table: {
                    colorBgContainer: '#0A0A0A',
                    colorText: '#DBDBDB',
                    colorTextHeading: '#DBDBDB',
                    fontSize: 12,
                    colorBorderSecondary: '#2b2b2b',
                    padding: 8,
                    colorIcon: '#FFFfff',
                },
                Form: {
                    colorTextHeading: '#E6E6E6',
                    fontSize: 16,
                },
                Tabs: {
                    colorPrimary: '#FF9F00',
                    colorPrimaryHover: '#FF9F00',
                    fontSize: 20,
                    colorText: '#E6E6E6',
                },
                Select: {
                    colorBorder: 'none',
                    colorBgContainer: '#242424',
                    colorBgElevated: '#242424',
                    controlItemBgActive: '#FF9F00',
                    colorText: '#E6E6E6',
                    colorTextDisabled: '#818181',
                },
                Menu: {
                    colorItemBgSelected: '#3B3B3B',
                    colorItemTextSelected: '#fff',
                    colorItemText: '#fff',
                    colorItemBg: '#242424',
                    colorItemTextHover: '#999',
                    // itemMarginInline: 0,
                },
                DatePicker: {
                    colorBgContainer: '#242424',
                    colorBorder: '#3B3B3B',
                    // colorText: '#E6E6E6',
                    // colorTextDisabled: '#818181',
                },
            },
        }">
            <router-view></router-view>
        </a-config-provider>
    </style-provider>
</template>

<style lang="less">
#app {
    height: 100vh;
    overflow: hidden;
}

.ant-select {
    position: relative;

    .ant-select-arrow {
        color: white !important;
        // top: 50% !important;
        // margin-top: 5px !important;
    }
}
</style>
